<template>
  <CzrDialog
    :show="show"
    :title="titleCpt"
    @onClose="$emit('update:show', false)"
    @onSubmit="onSubmit"
    width="1000px"
    height="auto"
    maxHeight="80%"
    :loading="state.loading"
  >
    <div class="__normal-form">
      <CzrForm ref="ref_form" label-width="100px" :form-view="!noViewCpt">
        <CzrFormColumn
          required
          :span="8"
          label="参数"
          v-model:param="state.form.p1"
        />
        <CzrFormColumn :span="8" label="参数" v-model:param="state.form.p1" />
        <CzrFormColumn :span="8" label="参数" v-model:param="state.form.p1" />
        <CzrFormColumn :span="8" label="参数" v-model:param="state.form.p1" />
        <CzrFormColumn :span="8" label="参数" v-model:param="state.form.p1" />
        <CzrFormColumn :span="8" label="参数" v-model:param="state.form.p1" />
        <CzrFormColumn :span="8" label="参数" v-model:param="state.form.p1" />
      </CzrForm>
    </div>
  </CzrDialog>
</template>

<script setup lang="ts">
import {
  computed,
  getCurrentInstance,
  nextTick,
  reactive,
  ref,
  watch,
} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const emit = defineEmits(['update:show', 'refresh'])
const { proxy } = getCurrentInstance()

const props = defineProps({
  show: { default: false },
  transfer: {},
})
const state: any = reactive({
  loading: false,
  form: {},
})
const ref_form = ref()
const titleCpt = computed(() => {
  let t = '表单'
  switch (props.transfer.mode) {
    case 'add':
      t = '新增' + t
      break
    case 'edit':
      t = '修改' + t
      break
    case 'view':
      t = '查看' + t
      break
  }
  return t
})
const noViewCpt = computed(() => props.transfer?.mode !== 'view')
watch(
  () => props.show,
  (n) => {
    if (n) {
      initDictionary()
      state.form = {}
      if (props.transfer.mode !== 'add') {
        initData()
      }
      nextTick(() => {
        ref_form.value.reset()
      })
    }
  },
)
const initData = () => {}
const onSubmit = () => {
  ref_form.value
    .submit()
    .then(() => {
      ElMessageBox.confirm('是否提交?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      } as any)
        .then(() => {
          state.loading = true
          if (props.transfer.mode == 'add') {
            ElMessage.success('新增成功！')
            emit('update:show', false)
            emit('refresh')
            state.loading = false
          } else if (props.transfer.mode == 'edit') {
            ElMessage.success('修改成功！')
            emit('update:show', false)
            emit('refresh')
            state.loading = false
          }
        })
        .catch(() => {})
    })
    .catch((e) => {
      ElMessage({
        message: e[0].message,
        grouping: true,
        type: 'warning',
      })
    })
}
const initDictionary = () => {}
</script>

<style lang="scss" scoped></style>
